<template>
  <div class="markets_mod" :class="themeClass">
    <v-nav :no_back="true" :title="$t('Markets.Currency Quotes')" :class="themeClass"></v-nav>
    <van-tabs v-model="symbolType" type="card" @click="search" title-active-color="#fff" title-inactive-color="#daab51" color="#daab51">
      <van-tab :title="$t('Markets.precious metals')" name="2"></van-tab>
      <van-tab :title="$t('Markets.cryptocurrency')" name="1"></van-tab>
    </van-tabs>
    <van-search v-model="searchValue" :placeholder="$t('Markets.Search currency')" @search="search" @clear="search" :class="themeClass" input-align="center"></van-search>

    <div class="markets_mod_box">
      <van-tabs v-model="active" :before-change="tabClick" v-if="isDayTime === false" title-active-color="#fff" title-inactive-color="#fff" color="#ededed" background="#191B27">
        <van-tab :title="$t('Markets.Optional')" name="optional"></van-tab>
        <van-tab :title="$t('Markets.market')" name="markets"></van-tab>
      </van-tabs>
      <van-tabs v-model="active" :before-change="tabClick" v-if="isDayTime === true">
        <van-tab :title="$t('Markets.Optional')" name="optional"></van-tab>
        <van-tab :title="$t('Markets.market')" name="markets"></van-tab>
      </van-tabs>
      <div class="list-title">
        <span>{{ $t('Markets.name') }}</span>
        <span>{{ $t('Markets.Latest price') }}</span>
        <span>{{ $t('Markets.Quote change') }}</span>
      </div>
      <van-empty v-if="total == 0" :description="$t('info.info7')" />
      <div class="van-list-data">
        <div v-for="(item, index) in list" :key="index" class="data-list" :class="themeClass1">
          <div @click="tradeDetail(item)" class="data-list-left">
            <img :src="item.logo" alt="" />

            <div class="text">
              <p>
                <span class="" :class="bgColor">{{ item.symbol }}</span>
              </p>
              <p>
                <span></span>
                <span>
                  24H {{ $t('Markets.quantity') }}
                  <br />
                  {{ (item.vol / 1000000).toFixed(2) }}M
                </span>
              </p>
            </div>
          </div>
          <div class="data-list-center" :class="bgColor">{{ item.lastPrice }}</div>
          <div class="data-list-right">
            <van-button :style="{ 'background-color': listBtnBgColor(item.rate) }">{{ item.rate.toFixed(2) }}%</van-button>
          </div>
        </div>
      </div>

      <van-pagination v-if="total != 0" v-model="currentPage" :total-items="total" :show-page-size="8" @pagination-item-default-color="rgb(218, 171, 81)" @change="getMarketsData">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>
    <v-footer style="background-color: transparent" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 'markets',
      list: [],
      timer: null,
      isDayTime: false,
      total: 0,
      currentPage: 1,
      searchValue: '',
      symbolType: 2
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    },
    socketMsgs() {
      return this.$websocket.getters.socketMsgs
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    },
    socketMsgs: function (data) {
      console.log('大厅的数据？',data)
      if (data.type == 'markets' || data.type == 'optional') {
        this.list = data.data.data
        this.total = data.data.total
      }
    }
  },
  activated() {
    this.getMarketsData()
  },
  deactivated() {
    this.closeMarketsData(this.active)
  },
  destroyed() {
    this.closeMarketsData(this.active)
  },
  methods: {
    // 订阅行情数据
    getMarketsData() {
      var userInfo = localStorage.getItem('userInfo')
      userInfo = userInfo != null ? JSON.parse(userInfo).token : ''
      var timer = setInterval(() => {
        if (this.$websocket.getters.getState) {
          this.$websocket.dispatch('webSocketSend', { type: this.active, symbolType: this.symbolType, token: userInfo, page: this.currentPage, search: this.searchValue })
          clearInterval(timer)
        }
      }, 1)
    },
    // 取消订阅行情数据
    closeMarketsData(method) {
      this.$websocket.dispatch('webSocketSend', { type: 'stop', method: 'markets' })
    },
    // 涨跌颜色
    listBtnBgColor(rate) {
      let color = rate <= 0 ? '#EE3E57' : '#0BBA99'
      return color
    },
    // 搜索货币
    search() {
      this.currentPage = 1
      this.getMarketsData()
    },
    // 币种详情
    tradeDetail(row) {
      localStorage.setItem('symbol', row.symbol)
      localStorage.setItem('symbolType', this.symbolType)
      this.$router.push({ path: '/trade' })
    },
    // 切换自选市场
    tabClick(index) {
      var userInfo = localStorage.getItem('userInfo')
      if (index == 'optional' && userInfo == null) {
        this.$dialog
          .confirm({
            title: this.$t('info.info20'),
            confirmButtonText: this.$t('info.info21'),
            cancelButtonText: this.$t('info.info11'),
            confirmButtonColor: 'rgb(218, 171, 81)',
            cancelButtonColor: 'rgb(218, 171, 81)',
            theme: 'round-button'
          })
          .then(() => {
            this.$router.push('/signIn')
          })
          .catch(() => {})
        return false
      }
      // 返回 Promise 来执行异步逻辑
      return new Promise(resolve => {
        this.currentPage = 1
        this.getMarketsData()
        // 在 resolve 函数中返回 true 或 false
        resolve(true)
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import url('./index.less');

/deep/ .van-pagination__item {
  background: #fff;
  color: #daab51;
}

// 按钮点击时的颜色
/deep/ .van-pagination__item--active {
  background: #daab51;
}

//文字未点击时的颜色
/deep/ .van-pagination__item {
  color: #daab51;
}

//文字点击时的颜色
/deep/ .van-pagination__item--active {
  color: #fff;
}
</style>
